<template>
    <div class="edit">
        <!-- 主体 -->
        <div class="main" v-if="selectList.length || mode === 'add'">
            <p class="title">药师接诊排班</p>
            <div class="box">
                <!-- 添加接诊医生  -->
                <Button v-if="mode === 'add'" type="primary" @click="addDoctr">
                    <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>添加排班药师
                </Button>
                <!-- 接诊医生显示 -->
                <div class="doctor" v-show='selectExpert.doctorName'>
                    <!-- 医院 -->
                    <span>{{ selectExpert.hospitalName }}</span>
                    <!-- 科室 -->
                    <span>{{ selectExpert.title }}</span>
                    <!-- 医生姓名 -->
                    <span>{{ selectExpert.doctorName }}</span>
                </div>
                <!-- 医生已开通服务 -->
                <div class = 'service' v-show='selectExpert.doctorName'>
                    <span>药师已开通服务：</span>
                    <div style='margin-right:8px;' v-for='(item,index) in servericeList'>
                        <Card :class="mode ==='edit'?'pricingCss':'isPricingCss'">
                            <Checkbox v-if="mode === 'edit'" :disabled='true' :value="true">{{ item.menuName }}</Checkbox>
                            <Checkbox v-else v-model="item.flag" :disabled="!item.pricing">{{ item.menuName }}</Checkbox>
                            <small v-if="!item.pricing && mode !== 'edit'" style="color:#ff9966;">(服务没有定价)</small>                         
                        </Card>
                    </div>
                </div>
                <!-- 已开启的服务 -->
                <div class = 'leftList' v-show='selectList.length' style='margin:20px 0;'>
                    <span>服务排班：</span>
                    <ul>
                        <li v-for='(item,index) in selectList' :class="{ active: serviceType == item.serviceType }" @click='clickCurrent(item,index)'>{{ item.menuName }}</li>
                    </ul>
                </div>
                <!-- 列表 -->
                <div class="table">
                    <p>设置接诊数量</p>
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>时间段</td>
                            <td>排班时间</td>
                            <td>星期一</td>
                            <td>星期二</td>
                            <td>星期三</td>
                            <td>星期四</td>
                            <td>星期五</td>
                            <td>星期六</td>
                            <td>星期天</td>
                        </tr>
                        <!-- @on-change="changeTime" -->
                        <tr>
                            <td>上午</td>
                            <td>
                                <TimePicker
                                    :value="value2"
                                    format="HH:mm"
                                    type="timerange"
                                    placement="bottom-end"
                                    placeholder="时间段"
                                    style="width: 120px"
                                    @on-change="changeTime"
                                    :disabled-hours="[0,1,2,3,4,5,6,7,13,14,15,16,17,18,19,20,21,22,23]"
                                    hide-disabled-options
                                ></TimePicker>
                            </td>
                            <td v-for='item in sumList' :key='item'>
                                <InputNumber :max="topLength" :min="0" v-model="item.AM"></InputNumber>
                            </td>
                        </tr>
                        <!-- @on-change="changeTime1" -->
                        <tr>
                            <td>下午</td>
                            <td>
                                <TimePicker
                                    :value="value3"
                                    format="HH:mm"
                                    type="timerange"
                                    placement="bottom-end"
                                    placeholder="时间段"
                                    style="width: 120px"
                                    :disabled-hours="[0,1,2,3,4,5,6,7,8,9,10,11,12,18,19,20,21,22,23]"
                                    hide-disabled-options
                                    @on-change="changeTime1"
                                ></TimePicker>
                            </td>
                            <td v-for='item in sumList' :key='item'>
                                <InputNumber :max="botLength" :min="0" v-model="item.PM"></InputNumber>
                            </td>
                        </tr>
                        <tr>
                            <td>晚上</td>
                            <td>
                                <TimePicker
                                    :value="value5"
                                    format="HH:mm"
                                    type="timerange"
                                    placement="bottom-end"
                                    placeholder="时间段"
                                    style="width: 120px"
                                    :disabled-hours="[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]"
                                    hide-disabled-options
                                    @on-change="changeTimeNight"
                                ></TimePicker>
                            </td>
                            <td v-for='item in sumList' :key='item'>
                                <InputNumber :max="NightLength" :min="0" v-model="item.NM"></InputNumber>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="inputnum">
                    <span> <i style="color:red">*</i> 预约期限：</span>
                    <!-- <Input v-model.trim="term" type='number' placeholder="请输入预约期限"/> -->
                    <InputNumber v-model.trim="term" placeholder="请输入预约期限" :max="999" :min="1" style="width:50%"></InputNumber>
                </div>
                <!-- 预约备注 -->
                <div class="text">
                    <span>预约备注：</span>
                    <Input v-model.trim="text_info" type="textarea" maxlength="80" :rows="4" placeholder="请输入备注"/>
                </div>
                <!-- <div class="footer">
                    <div style='margin-top:10px;width:50%;'>
                        <span>班外时间可接诊：</span>
                        <iSwitch v-model="classTime" size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </iSwitch>
                        <p style="color:#ff9966;line-height:35px" v-if="classTime == true ">（备注：开启后，在设置排班以外的时间，也可以接诊。）</p>
                        <p style="color:#ff9966;line-height:35px" v-if="classTime == false ">（备注：关闭后，非排班时间不可以接诊。）</p>
                    </div>
                    <div style='margin-top:10px;width:50%;'>
                        <span>班内排班启用标识：</span>
                        <iSwitch v-model="inClassTime"  size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </iSwitch>
                        <p style="color:#ff9966;line-height:35px" v-if="inClassTime == true ">（备注：开启后，班内设置排班以内，方可以接诊。）</p>
                        <p style="color:#ff9966;line-height:35px" v-if="inClassTime == false ">（备注：关闭后，即便设置排班，班内时间也不可以接诊。）</p>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="entry" v-if='!selectList.length && mode === "edit"'>
            <h2>该医生暂无排班详情</h2>
            <Button @click="back">返回</Button>
        </div>
        <!-- 保存 -->
        <div class="save">
            <Button type="primary" style="width:75px;height:35px;" @click="save" :loading="submitLoading">
                <Icon type="ios-checkmark" style="margin-right: 5px" />保存
            </Button>
            <Button @click="back" style="width:75px;height:35px;">
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
            </Button>
        </div>
        <!-- 选择专家 -->
        <Modal v-model="modal1" title="选择药师" :footer-hide="true" width="800" :styles="{top: '20px'}">
            <div class="modelExpert">
                <div class="searchExpertList">
                    <input type="text" placeholder="输入姓名、机构名称、职称" style='width:230px;margin-right:10px;' v-model.trim="searchName">
                    <Button type="primary" icon="ios-search" @click="searchExpert(1)">查询</Button>
                </div>
                <Table stripe :columns="columns" border :loading="tableLoading" :data="expertList"style='width:100%;'></Table>
                <div class="total">
                    <Page :total="expertSize" :current="expertNo" @on-change="change1"/>
                </div>
            </div>
        </Modal>
    </div>
</template>
<script>
import tempHeader from "@/components/tmpHeader";
import { TimePicker } from "view-design";
import api from "@/api/commonApi";
import { Card } from 'view-design'
export default {
    components: {
        tempHeader,
        TimePicker,
        Card
    },
    props: {
      mode: String
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 2,
            // 最大号源限制
            topLength: 9999,
            botLength: 9999,
            NightLength: 9999,
            // 添加专家model
            modal1: false,
            expertNo: 1,
            expertSize: 10,
            searchName: '',
            expertList: [],
            // 医生表头信息
            columns:[
                {
                    title:"机构名称",
                    key:"hospitalName",
                    align:"center"
                },
                {
                    title:"姓名",
                    key:"doctorName",
                    align:"center"
                },
                {
                    title:"职称",
                    key:"title",
                    align:"center"
                },
                {
                    title:"选择",
                    align:"center",
                    render:(h,params) =>{
                        let row = params.row;
                        
                        return [
                            h('a',{
                                on:{
                                    click: () => {
                                        this.expert(row)
                                    }
                                }
                            },"选择")
                        ]
                    }
                }
            ],
            // 备注
            text_info: "",
            term: 1,
            // 上午时间
            value2: ["08:00", "12:00"],
            // 下午时间
            value3: ["13:00", "17:00"],
            // 晚上时间
            value5:['18:00','21:00'],
            // 一周号源
            sumList : [
                {
                    // 周一
                    AM: '',
                    PM: '',
                    NM: '',
                },
                {
                    // 周二
                    AM: '',
                    PM: '',
                    NM: '',
                },
                {
                    // 周三
                    AM: '',
                    PM: '',
                    NM: '',
                },
                {
                    // 周四
                    AM: '',
                    PM: '',
                    NM: '',
                },
                {
                    // 周五
                    AM: '',
                    PM: '',
                    NM: '',
                },
                {
                    // 周六
                    AM: '',
                    PM: '',
                    NM: '',
                },
                {
                    // 周天
                    AM: '',
                    PM: '',
                    NM: '',
                }
            ],
            selectExpert: {
                // 医院名称
                hospitalName: "",
                // 科室名称
                deptType: '',
                // 医生名称
                doctorName: '',
                doctorId:""
            },
            // 班外时间可接诊
            classTime: true,
            // 班内时间接诊
            inClassTime: true,

            // 医生服务列表
            servericeList: [],
            id:"",

            single: true,
            current: 0,
            selectList: [],
            // 当前选择中的单选
            serviceType: '',
            // 当前选择的数据
            currentDate: {},
            tableLoading: false,
            submitLoading: false,
        };
    },
    created() {
        this.province = this.$route.query.province?parseInt(this.$route.query.province):null;
        this.city = this.$route.query.city?parseInt(this.$route.query.city):null;
        this.area = this.$route.query.area?parseInt(this.$route.query.area):null;
        this.hospital = this.$route.query.hospital?this.$route.query.hospital:null;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生端运营"
            },
            {
                path: "/index/operation/interScheduling",
                title: "互联网排班"
            }
        ];
        this.$emit("changeBreadList", breadList);
        if (this.mode === 'edit') {
          let id = this.$route.query.id;
          this.id = id;
          this.getDefaultData(id)
        }
    },
    methods: {
        // 选择专家
        expert(item) {
            this.modal1 = false;
            this.selectExpert = item;
            // 通过选择的药师加载药师服务列表
            console.log(JSON.stringify({
                doctorId: item.doctorId
            }));
            // this.$axios.post(api.schedulingMenuList, {
            this.$axios.post(api.queryDoctorMenuListByDoctorId, {
                doctorId: item.doctorId
            }).then(res => {
                if(res.data.success) {
                    let ret = res.data;
                    this.servericeList = ret.object;
                    this.servericeList.forEach(item => {
                        item.flag = false;
                    })
                    if(this.servericeList.length == 0) {
                        this.$Message.info('请核对服务是否开通，或职称是否定价')
                    }
                    console.log(this.servericeList);
                } else {
                    this.$Message.error(ret.message)
                }
            })
        },
        // 加载弹窗并请求药师接口
        addDoctr() {
            this.searchExpert(1);
            this.modal1 = true;
        },
        //  取消,后退 上一次
        back() {
            let pageNo = this.$route.query.pageNo;
            // function全局方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/InterScheduling/list",
                {
                    pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack: 2
                }
            );
        },
        // 模态框的分页器改变
        change1(index) {
            this.searchExpert(index);
        },
        // 保存/新增专家
        save() {
            let serviceType = []
            let timsList = []
            this.sumList.forEach((item, index) => {
                if(Boolean(item.AM)) {
                    // 上午
                    timsList.push({
                        // 上下晚
                    "day": 1,
                        // 号源
                    "num": item.AM,
                    "timeEnd": this.value2[1] || null,
                    "timeStart": this.value2[0] || null,
                        // 周几
                    "week": index + 1
                    })
                }
                if(Boolean(item.PM)) {
                     // 下午
                    timsList.push({
                        // 上下晚
                    "day": 2,
                        // 号源
                    "num": item.PM,
                    "timeEnd": this.value3[1] || null,
                    "timeStart": this.value3[0] || null,
                        // 周几
                    "week": index + 1
                    })
                }
                if(Boolean(item.NM)) {
                    // 晚上
                    timsList.push({
                        // 上下晚
                    "day": 3,
                        // 号源
                    "num": item.NM,
                    "timeEnd": this.value5[1] || null,
                    "timeStart": this.value5[0] || null,
                        // 周几
                    "week": index + 1
                    })
                }
            })
            let params = {
                "areaCode": this.area,
                "cityCode": this.city,
                "provinceCode": this.province,
                "doctorId": this.selectExpert.doctorId,
                // "isUsed": Number(this.inClassTime).toString(),
                // "outUsed": Number(this.classTime).toString(),
                "remark": this.text_info,
                "term": this.term,
                timesList: timsList,
                type: 2,
            }
            if (!this.term) {
                this.$Message.error("请填写预约期限");
                return ""
            } else if (this.term<1) {
                this.$Message.error("预约期限不能小于1");
                return ""
            }
            let url = '';
            let typeList = []
            if (this.mode == 'add') {
                url = api.insertScheduling;               
                this.servericeList.forEach(item =>{
                    if(item.flag) {
                        typeList.push(item.serviceType)
                    }
                });
                params.typeList = typeList;
            }
            if (this.mode === 'edit') {
                url = api.updateScheduling;
                params.serviceType = this.currentDate.serviceType;
                this.servericeList.forEach(item =>{
                    if(item.flag) {
                        typeList.push(item.serviceType)
                    }
                });
                params.typeList = typeList;
            }
            params.id = this.currentDate.schedulingId || null;

            console.log("传递参数", params);
            if (!this.value2[1] || !this.value3[1] || !this.value5[1]) {
                this.$Message.error("请检查是否有时间段未填写完整!");
                return ""
            } else if (typeList.length <= 0) {
                this.$Message.error("请确认该药师权限配置或职称价格是否配置")
                return ''
            }
            if (!params.doctorId) {
                this.$Message.error("请选择药师!");
                return false;
            }
            if(this.inClassTime) {
                if(params.timesList.length == 0) {
                    this.$Message.error("请选择号源")
                    return ""
                }
            }
            // debugger;
            this.submitLoading = true;
            this.$axios.post(url, params).then(res => {
                console.log(res);
                if (res.data.success) {
                    this.submitLoading = false;
                    this.$Message.success(res.data.object.same || res.data.object.success);
                    this.back();
                } else {
                    this.submitLoading = false;
                    this.$Message.error(res.data.message);                   
                }
            });
            
        },
        // 选择时间/上午
        changeTime(val) {
            this.value2 = val;
            if (Boolean(val)) {
                let m1 = Number(val[0].split(":")[1]);
                let s1 = val[0].split(":")[0] * 60 + m1;
                let m2 = Number(val[1].split(":")[1]);
                let s2 = val[1].split(":")[0] * 60 + m2;
                let count = s2 - s1;
                if (count <= 0) {
                    this.$Message.error("结束时间不能小于或等于开始时间");
                    this.value2 = ["08:00", "12:00"]
                    return "";
                }
            }
        },
        // 选择时间/下午
        changeTime1(val) {
            this.value3 = val;
            if (Boolean(val)) {
                let m1 = Number(val[0].split(":")[1]);
                let s1 = val[0].split(":")[0] * 60 + m1;
                let m2 = Number(val[1].split(":")[1]);
                let s2 = val[1].split(":")[0] * 60 + m2;
                let count = s2 - s1;
                 if (count <= 0) {
                    this.$Message.error("结束时间不能小于或等于开始时间");
                    this.value3 = ["13:00", "17:00"]
                    return "";
                }
            }
        },
        // 选择时间/晚上
        changeTimeNight (val) {
            this.value5 = val;
            if (Boolean(val)) {
                let m1 = Number(val[0].split(":")[1]);
                let s1 = val[0].split(":")[0] * 60 + m1;
                let m2 = Number(val[1].split(":")[1]);
                let s2 = val[1].split(":")[0] * 60 + m2;
                let count = s2 - s1;
                if (count <= 0) {
                    this.$Message.error("结束时间不能小于或等于开始时间");
                    this.value5 = ['18:00','22:00']
                    return "";
                }
            }
        },
        // TAB页改变加载不同页的数据
        clickCurrent (row, index) {
            let id = row.schedulingId;
            this.serviceType = row.serviceType
            this.currentDate = row;
            if(row.flag) {
                this.getServiceTime(id)
            } else {
                this.clearData();
            }
            
        },
        // 获取药师已开通服务
        getDefaultData (id) {
            let url = api.schedulingMenuByDoctorId;
            let params = { doctorId: id }
            this.$axios.post(url, params).then(res => {
                if(res.data.success) {
                    let ret = res.data.object;
                    console.log('已经开通的服务', ret);
                    this.servericeList = []                  
                    ret.forEach(item => {
                        // isUsed  班内排班是否启用(0禁用,1启用)，status是否已经排班0-未排班  1-已经排班
                        this.servericeList.push({
                            doctorId: item.doctorId,
                            isUsed: item.status, // 应该没用
                            itemFeePrice: item.itemFeePrice,
                            menuName: item.menuName,
                            schedulingId: item.schedulingId,
                            serviceType: item.serviceType,
                            flag : Boolean(Number(item.status)),
                            status: item.status
                        })
                        this.selectList.push({
                            doctorId: item.doctorId,
                            isUsed: item.status, // 应该没用
                            itemFeePrice: item.itemFeePrice,
                            menuName: item.menuName,
                            schedulingId: item.schedulingId,
                            serviceType: item.serviceType,
                            flag : Boolean(Number(item.status)),
                            status: item.status
                        })
                    })
                    if(this.selectList.length == 0) {
                        this.$Notice.warning({
                            title: '通知信息',
                            desc: '该医生未开启服务或医院已关闭服务'
                        });
                    }
                    if(this.selectList.length > 0) {
                        // 从服务列表中筛选出已经拍过班的服务，根据排班id获取详情；
                        const useableData = this.selectList.filter(item => item.schedulingId)[0];
                        this.getServiceTime(useableData.schedulingId);
                        this.serviceType = useableData.serviceType
                        this.currentDate = useableData;
                    }
                }
            })
        },
        // 通过医生ID和服务类型获取医生预约时间段
        getServiceTime(id) {
            this.clearData();
            if (!id) return false;
            this.$axios.post(api.findschedulingId, {
               id
            }).then(res => {
                // console.log("通过ID查询排班列表", res);
                if(res.data.success) {
                    let ret = res.data.object;
                    console.log(ret);
                    
                    this.selectExpert.hospitalName = ret.hospitalName
                    // 药师职称
                    this.selectExpert.title = ret.title;
                    // 医生名称
                    this.selectExpert.doctorName = ret.doctorName
                    this.selectExpert.doctorId = ret.doctorId
                    this.classTime = Boolean(Number(ret.outUsed))
                    // 班内时间接诊
                    this.inClassTime = Boolean(Number(ret.isUsed))
                    this.text_info = ret.remark
                    this.term = ret.term
                    this.id = ret.id;
                    ret.timesList.forEach(item => {
                        let day = item.day;
                        if(Number(item.day) == 1) {
                            // console.log("上午");
                            this.sumList[item.week-1].AM = item.num
                            this.value2 = [item.timeStart, item.timeEnd]
                        } else if(Number(item.day) == 2) {
                            // console.log("下午");
                            this.sumList[item.week-1].PM = item.num
                            // 下午时间
                            this.value3 = [item.timeStart, item.timeEnd]
                        } else {
                            // console.log("晚上");
                            this.sumList[item.week-1].NM = item.num
                            // 晚上时间
                            this.value5 = [item.timeStart, item.timeEnd]
                        }
                    })

                } else {
                    this.$Message.error('查询医生服务排班失败!')
                }
            })

        },
        // 清空查询内容
        clearData () {
            this.sumList.forEach(item => {
                item.AM = ''
                item.PM = ''
                item.NM = ''
            })
            this.classTime = true
            // 班内时间接诊
            this.inClassTime = true
            this.text_info = ''
            this.term = 1
        },
        // 获取药师未排班列表
        searchExpert(val) {
            this.tableLoading = true;
            this.expertNo = val;
            this.$axios
                .post(api.schedulingDoctorList, {
                    pageNo: this.expertNo,
                    pageSize: 10,
                    searchKey: this.searchName.trim(),
                    type: 2,
                    "areaCode": this.area,
                    "cityCode": this.city,
                    "hospitalId": this.hospital,
                    provinceCode : this.province
                })
                .then(res => {
                    if (res.data.code) {
                        let ret = res.data.object;
                        console.log(ret);
                        this.expertList = ret.records;
                        this.expertSize = ret.total;
                        this.tableLoading = false;
                    } else {
                        this.$Message.error("加载医生权限管理失败")
                    }
                });
        }
    },
};
</script>
<style lang="less" scoped>
.edit {
    width: 100%;
    padding: 10px 0;
    margin: 0 auto;
    background: #fff;
    .footer{
        display: flex;
        margin-bottom: 30px;
    }
    .main {
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        .box{
            padding: 0 30px;
        }
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .leftList {
            width: auto;
            height:40px;
            display:flex;
            flex-direction:row;
            align-items:center;
            ul{
                width:80%;
                display:flex;
                flex-direction:row;
                align-items:center;
                border-bottom: 1px solid #ddd;
                li{
                    text-align:center;
                    padding:10px 20px;
                    cursor:pointer;
                    border-bottom: 2px solid transparent;
                    transition: all 0.5s;
                }
                li:hover {
                    color: #5362e1;
                    border-bottom: 2px solid #5362e1;
                }
                li.active {
                    color: #5362e1;
                    border-bottom: 2px solid #5362e1;
                }
            }
        }
        .service{
            margin-top:20px;
            display:flex;
            flex-direction: row;
            align-items:center;
            flex-wrap:wrap;
        }
        .doctor {
            width: 100%;
            display: flex;
            height: 40px;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            span {
                margin-right: 20px;
                font-size: 20px;
            }
        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            .item-text {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 100px;
            }
            .w-select {
                width: 150px;
            }
        }
        .table {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin: 10px 0;
            p {
                text-align: center;
                margin: 10px 0;
            }
            table {
                width: 100%;
                border: 1px solid #ddd;
                tr:not(:first-child):hover {
                    background: #ebf7ff;
                }
                tr:first-child{
                    background: #f8f8f9;
                }
                tr {
                    border-top: 1px solid #ddd;
                    height: 40px;
                    td {
                        text-align: center;
                    }
                    td.none {
                        display: none;
                    }
                }
            }
            .nodata {
                width: calc(100% - 1px);
                line-height: 40px;
                background: #fff;
                border: 1px solid #ddd;
                border-top: none;
                text-align: center;
            }
        }
        .text {
            width: 100%;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
        .inputnum {
            width: 20%;
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
    }
    .save {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 200px;
        margin: 10px auto;
        justify-content: space-around;
    }
}
.modelExpert {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .total {
        text-align: center;
        margin: 10px 0;
    }
    .modelExpert_list {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        span {
            width: 25%;
            text-align: center;
            user-select: none;
        }
    }
    .searchExpertList {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
        input {
            width: 80%;
            background: #fff;
            border: none;
            outline: none;
            text-indent: 10px;
            line-height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    }
}
.pricingCss{
    width:110px;
}
.isPricingCss{
    width:115px;
    height:75px;
}
</style>

